<div id='Terminal'>
	<div class="row" style="position: absolute;right: 16px;">
		<div class="col-sm-12 PanelItemF">
			<div class="PanelItem PanelItemBlack" v-on:click="RES.redirectPage('./template/component/console.html', 'server/console', MCSERVER.listenServername);">
				<span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span> 控制台
			</div>
			<div v-if="MCSERVER.username.substr(0, 1)=='#'" class="PanelItem PanelItemBlack" v-on:click="RES.redirectPage('./template/server.html', 'server/view', '');">
				<span class="glyphicon glyphicon-list" aria-hidden="true"></span> 实例列表
			</div>
			<div class="PanelItem PanelItemBlack" v-on:click="loadHistory()">
				<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> 历史
			</div>
			<div class="PanelItem PanelItemBlack PhoneDisplayNone" v-on:click="goBttom()">
				<span class="glyphicon glyphicon-download PhoneDisplayNone" aria-hidden="true"></span> 底部
			</div>
			<div class="PanelItem PanelItemBlack " v-on:click="clearConsole()">
				<span class="glyphicon glyphicon-th-large " aria-hidden="true"></span> 清屏
			</div>
			<div class="PanelItem PanelItemBlack" v-on:click="stopServer()">
				<span class="glyphicon glyphicon-pause" aria-hidden="true"></span> 关闭
			</div>
			<div class="PanelItem PanelItemBlack PhoneDisplayNone" v-on:click="toOpenServer()">
				<span class="glyphicon glyphicon-play PhoneDisplayNone" aria-hidden="true"></span> 开启
			</div>
		</div>
	</div>
	<div id="TerminalMinecraft" contenteditable="false">
		<br />
		<span style='color:#03ea0a;'>[ SYSTEM ]</span> MCSM Console...
		<br />
	</div>
	<div class="" style="border-top: 1px solid #585858;">
		<input id='TerminalCommand' @keyup.up="toCommandhi(1)" @keyup.down="toCommandhi(-1)" @keyup.enter="toCommand" v-model="command"
		    type="text" class="TerminalCommand" placeholder="[命令输入框] 按下 ↑ 或 ↓ 可以查看本地命令记录,输入 help 或 ? 可以查看帮助信息,回车执行命令." aria-describedby="sizing-addon3"
		    autocomplete="off">
	</div>
</div>
</div>
<script>
	MI.rListener('onload', function () {
		//默认隐藏控制台
		MCSERVER.colmSet(false);

		PAGE.nowPage = 0; //当前最低页
		PAGE.serverName = MCSERVER.listenServername;

		//容器布局改变
		$('#MainContainer').css('background-color', 'rgb(60,60,60)');
		$('#ConsoleMain').css('max-width', '999999px');

		WS.sendMsg('server/console/ws', PAGE.serverName);

		PAGE.TerminalMinecraft = $('#TerminalMinecraft');
		PAGE.TerminalMinecraft.css('height', (document.body.clientHeight - 50 - 45) + 'px')

		PAGE.tmp_onresize = function () {
			$('#TerminalMinecraft').css('height', (document.body.clientHeight - 50 - 45) + 'px');
		};
		MI.listener('resize', PAGE.tmp_onresize);

		VIEW_MODEL.newVue('Terminal', {
			el: '#Terminal',
			methods: {
				goBttom: function () {
					var ele = document.getElementById('TerminalMinecraft');
					ele.scrollTop = ele.scrollHeight;
				},
				loadHistory: function () {
					var obj = {};
					obj.serverName = PAGE.serverName;
					WS.sendMsg('server/console/history', JSON.stringify(obj));
				},
				toOpenServer: function () {
					WS.sendMsg('server/console/open', PAGE.serverName);
				},
				toCommand: function (parCommand) {
					if (parCommand && typeof (parCommand) == 'string') this.command = parCommand;
					var data = {
						command: this.command,
						serverName: PAGE.serverName
					};
					if (this.command.length >= 1 || typeof (parCommand) == 'string') {
						//压入命令栈 并 发送
						this.commandList.unshift(this.command);
						WS.sendMsg('server/console/command', JSON.stringify(data));
					}
					this.command = '';
					this.commandListPrint = 0;

				},
				toCommandhi: function (fl) {
					if (this.commandListPrint > (this.commandList.length - 1)) this.commandListPrint = this.commandList.length -
						1;
					if (this.commandListPrint < 0) this.commandListPrint = 0;
					console.log('commandListPrint', this.commandListPrint, 'vlaue', this.commandList[this.commandListPrint]);
					if (fl == 1) { //up
						this.command = this.commandList[this.commandListPrint];
						this.commandListPrint++;
					} else { //down
						this.command = this.commandList[this.commandListPrint];
						this.commandListPrint--;
					}
					return false;
				},
				clearConsole: function () {
					var ele = document.getElementById('TerminalMinecraft');
					ele.innerHTML = ["<br /><span style='color:#03ea0a;'>", "[ 控制面板 ]:", "</span>",
						"控制面板内容已经清空，您所查看的历史记录位置依然保留。",
						"<br>",
						"<span style='color:#03ea0a;'>", "[ 控制面板 ]:", "</span>",
						"如果您在此页面遇到卡顿，内存高等现象，请使用此功能来优化。<br />"
					].join(" ");
				},
				stopServer: function () {
					this.toCommand('stop');
					this.toCommand('end');
					this.toCommand('exit');
					var that = this;
					setTimeout(function () {
						console.log("AAAAAAAAA")
						that.toCommand('stop');
						that.toCommand('end');
						that.toCommand('exit');
					}, 2000);
				}
			},
			data: {
				allowedStart: true,
				command: '',
				commandList: [],
				commandListPrint: 0,
				historyIf: false

			}
		});
		PAGE.mainC = document.getElementById('TerminalMinecraft');
	});

	MI.rListener('onend', function () {
		WS.sendMsg('server/console/remove', '');
		PAGE.mainC.innerHTML = "";
		PAGE.mainC.onscroll = function () {};

		MI.onDestroy('resize', PAGE.tmp_onresize);

		//布局恢复
		$('#MainContainer').removeAttr('style');
		$('#ConsoleMain').removeAttr('style');

	})
</script>